import React, {FC, useMemo} from 'react';
import {ProColumns} from '@ant-design/pro-table';
import service from './service';
import {SysOperateLogModel} from './data';
import Details from './components/Details';
import ProTableCrud, {ProTableCrudOperate} from '@/components/ProTableCrud';
import useList from '@/hooks/useList';
import {formatDate} from "@/utils/utils";
import moment from "moment";
import useDialog from "@/hooks/useDialog";
import {DialogOperate} from "@/global";

const startDate = moment().subtract(7, 'd');
const endDate = moment();

/** 系统操作日志模块 */
const SysOperateLogPage: FC = () => {
  const detailsOperate = useDialog();

  //List
  const listOperate = useList<SysOperateLogModel>({
    onLoad: (params) => {
      const {operateDateTime, ...rest} = params;
      const operateStartDateTime = (operateDateTime && operateDateTime[0]) || (formatDate(startDate));
      const operateEndDateTime = (operateDateTime && operateDateTime[1]) || (formatDate(endDate));
      return service.selectPageList({...rest, operateStartDateTime, operateEndDateTime});
    },
  });

  //表格列
  const cols = useMemo(() => getCols(detailsOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<SysOperateLogModel> = {
    cols,
    showToolbar: false,
    showOptionColumn: false,
    listOperate,
    detailsOperate,
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud rowSelection={undefined} scroll={{x: 1500}} operate={tableOperate}/>
  );
};

/** 获取表格列 */
function getCols(detailsOperate: DialogOperate): (ProColumns<SysOperateLogModel>[]) {
  return [
    {
      title: '操作日期',
      dataIndex: 'operateDateTime',
      align: 'center',
      sorter: true,
      width: 170,
      order: 5,
      valueType: 'dateRange',
      initialValue: [startDate, endDate],
      render: (t, r) => {
        return (
          <a onClick={() => detailsOperate.show({id: r.id})}>{t}</a>
        );
      },
      formItemProps: {
        'placeholder': ['开始日期', '结束日期'],
        'disabledDate': (current: any) => {
          //不能选择大于今天的日期
          return current && current > moment();
        },
      },
    },
    {
      title: '操作人',
      dataIndex: 'operateUserName',
      width: 200,
      ellipsis: false,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入操作人',
      },
    },
    {
      title: '操作消息',
      dataIndex: 'msg',
      hideInSearch: true,
      ellipsis: true,
      sorter: false,
    },
    {
      title: '耗时',
      dataIndex: 'costTime',
      hideInSearch: true,
      width: 150,
      ellipsis: true,
      align: 'center',
      render: (_, r) => {
        if (r.costTime <= 0) return '-';
        return r.costTimeName;
      },
    },
    {
      title: '操作IP',
      dataIndex: 'ip',
      hideInSearch: false,
      width: 200,
      ellipsis: false,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入操作IP',
      },
    },
    {
      title: '所属模块',
      dataIndex: 'tag',
      width: 200,
      sorter: false,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入所属模块',
      },
    },
    {
      title: '所属应用',
      dataIndex: 'appName',
      hideInTable: false,
      hideInSearch: false,
      ellipsis: false,
      width: 150,
      sorter: false,
      filters: undefined,
      align: 'center',
      formItemProps: {
        'placeholder': '请输入应用名称',
      },
    },
  ]
}

export default SysOperateLogPage;
